<template>
	<div class="allcontent">
		<div class="search">
			<el-form  size="small"  @submit.native.prevent :model="searchParam" ref="queryFormRef">
				<el-row gutter="10">
					<el-col span="8">
						<el-form-item prop="menuName">

							<el-input  @keyup.enter.native="search" placeholder="请输入菜单名称模糊搜索" autofocus v-model="searchParam.menuName"></el-input>
						</el-form-item>
					</el-col>
					<el-col  span="8">
						<el-form-item prop="menuStatus">
							<el-select   @change="search" v-model="searchParam.menuStatus" style="width:200px" placeholder="请选择菜单状态搜索">
							    <el-option
							      key="-1"
							      label="全部"
							      value="-1"
							    />
								<el-option
							      key="1"
							      label="正常"
							      value="1"
							    />
								<el-option
								  key="0"
								  label="禁用"
								  value="0"
								/>
							  </el-select>
						</el-form-item>	
					</el-col>
					<el-col  span="8">
						<el-button  plain icon="Search" type="primary" @click="search">搜索</el-button>
					</el-col>
					<el-col  span="8">
						<el-button plain icon="Refresh"  type="warning" @click="reset(queryFormRef)">重置</el-button>
					</el-col>
				</el-row>
				<el-row gutter="10" style="margin-top:10px;margin-bottom: 10px;">
					<el-col span="8">
						<el-button  plain icon="Edit"  v-if="userStore.hasPermission('system:menu:add')" type="success" @click="addMenu()">新增</el-button>
						<el-button plain type="primary" @click="expenFun()">展开/折叠</el-button>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div class="el-table">
			<el-table :data="tableData" style="width: 100%;font-size: 13px;"
			row-key="id"
			      border  :default-expand-all="expendAll" :key="tableKey" v-loading="loading">
        <el-table-column prop="menuName" label="菜单名称"/>
        <el-table-column prop="menuType" label="菜单类型">
          <template  #default="scope">
            <el-tag type="primary" v-if="scope.row.menuType == 0">目录</el-tag>
            <el-tag type="success" v-else-if="scope.row.menuType == 1">菜单</el-tag>
            <el-tag type="warning" v-else-if="scope.row.menuType == 2">按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序"/>
				<el-table-column prop="menuIcon" label="图标">
					<template  #default="scope">
						<component  :is="scope.row.menuIcon.replace('el-icon-', '')" style="width:40px;height:40px;"></component>
					</template>
				</el-table-column>	
				<el-table-column prop="permissionCode" label="权限标识"/>
				<el-table-column prop="menuPath" label="组件路径"/>
        <el-table-column prop="level" label="等级"/>
				<el-table-column prop="menuStatus" label="状态">
					<template  #default="scope">
						<el-tag v-if="scope.row.menuStatus == 1">正常</el-tag>
						<el-tag type="danger" v-else-if="scope.row.menuStatus == 0">禁用</el-tag>
					</template>
				</el-table-column>	
				<!-- <el-table-column prop="createTime" label="创建时间">
					<template #default="scope">
						{{formatTimestamp(scope.row.createTime)}}
					</template>
				</el-table-column> -->
				<el-table-column  label="操作" width="250">
					<template  #default="scope">
						<el-button plain icon="Edit"  v-if="userStore.hasPermission('system:menu:add')" size="small" type="success" @click="addMenu(scope.row.id)">新增</el-button>
						<el-button plain icon="Edit"  v-if="userStore.hasPermission('system:menu:edit')" size="small" type="primary" @click="editUser(scope.row.id)">编辑</el-button>
						<el-popconfirm  v-if="userStore.hasPermission('system:menu:delete')"
						    confirm-button-text="是"
						    cancel-button-text="否"
						    :icon="InfoFilled"
						    icon-color="#626AEF"
						    title="是否删除该数据?"
						    @confirm="deleteMenu(scope.row)"
						  >
						    <template #reference>
						      <el-button  plain icon="Delete" size="small" type="danger">
								  删除
						      </el-button>
						    </template>
						  </el-popconfirm>
						
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-drawer size="40%" v-model="addMenuDialog" title="新增" width="50%">
			<AddMenu :parentId="parentId"  @closeAddMenuForm="closeAddMenuForm" @success="success"></AddMenu>
		</el-drawer>
		<el-drawer size="40%"  v-model="editMenuDialog" title="编辑" width="50%">
			<EditMenu :menuId="menuId"  @closeEditMenuForm="closeEditMenuForm" @success="success"></EditMenu>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
	import {ref,reactive,onMounted} from 'vue'
	import AddMenu from './AddMenu.vue'
	import EditMenu from './EditMenu.vue'
	import {treelist,remove} from '@/api/menu.ts'
	import type { FormInstance } from 'element-plus'
	import {ElMessage} from 'element-plus'
	import {useUserStore} from '@/stores/user.ts'
	import {formatTimestamp} from '@/utils/date.ts'
	const userStore = useUserStore()
	
	
	
	let searchParam =reactive({
		menuName:null,
		menuStatus:null,
	})
	const search=()=>{
		loadData();
	}
	const queryFormRef=ref<FormInstance>();
	const reset=(formEl: FormInstance | undefined) => {
		  if (!formEl) return
		  formEl.resetFields()
		  loadData();
	}
	interface Menu{
		id:number,
		menuName:string,
		sort:string, 
		menuIcon:string, 
		permissionCode:string,  
		menuPath:string, 
		status:string,
    level:number,
		createTime:Date,
		children?:Menu[]
	}
	let tableData:Menu[] = [];
	const loading=ref(true);
	const loadData =()=>{
		loading.value=true;
		treelist(searchParam).then((res)=>{
			if(res.code === 200){
				tableData = res.data;
			}
			loading.value=false;
		})
	}
	onMounted(()=>{
		loadData();
	})
	
	const addMenuDialog = ref(false);
	const editMenuDialog = ref(false);
	
	// 关闭保存用户弹出框
	const closeAddMenuForm = ()=> {
	  addMenuDialog.value = false
	  parentId.value=null;
	}
	const closeEditMenuForm = ()=> {
	  editMenuDialog.value = false
	  menuId.value=null;
	}
	
	// 提交表单回调函数
	const success = ()=> {
	  addMenuDialog.value = false
	  editMenuDialog.value = false
	  parentId.value=null;
	  menuId.value=null;
	  loadData();
	}
	const menuId = ref()
	const parentId = ref();
	const addMenu=(id:number)=>{
		parentId.value=id;
		addMenuDialog.value = true;
	}
	const editUser=(id:number)=>{
		menuId.value = id;
		editMenuDialog.value = true;
	}
	const deleteMenu = async (row:Menu) => {
	  if(row.children && row.children.length > 0){
		  ElMessage({
			  type:'warning',
			  message:'当前菜单下有子菜单，需先删除子菜单后，才能删除该菜单!'
		  })
		  return;
	  }
	  const ids = [row.id];
	  await remove(ids)
	  loadData();
	}
	const expendAll = ref(false);
	const tableKey = ref();
	const expenFun=()=>{
		tableKey.value = +new Date();
		expendAll.value=!expendAll.value;
	}	
</script>

<style scoped>
	.search{
		margin-bottom: 10px;
	}
	.allcontent{
		height: 65vh;
		position: relative;
	}
	.el-table{
		max-height:70%;
		overflow: auto;
	}
	.el-table::-webkit-scrollbar{
		display: none;
	}
</style>